<style>
    .gfont{
        color: #009688;
    }
    .rfont{
        color: #FF5722;
    }
</style>

<div class="layuimini-main">
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">旧的密码</label>
            <div class="layui-input-inline">
                <input id="oldPassword" type="password" name="oldPassword" lay-verify="required" lay-reqtext="旧的密码不能为空" placeholder="请输入旧的密码" value="" class="layui-input">
                <input id="flag" hidden type="text" name="flag" value="0">
            </div>
            <div id="i1" class="layui-form-mid layui-word-aux"><tip>填写自己账号的旧的密码。</tip><i style="display: none"></i></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">新的密码</label>
            <div class="layui-input-inline">
                <input id="newPassword" type="password" name="newPassword" lay-verify="required" lay-reqtext="新的密码不能为空" placeholder="请输入新的密码" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">新的密码</label>
            <div class="layui-input-inline">
                <input id="againPassword" type="password" name="againPassword" lay-verify="required|pass" lay-reqtext="新的密码不能为空" placeholder="请输入新的密码" value="" class="layui-input">
            </div>
            <div id="i2" class="layui-form-mid layui-word-aux"><tip>再次填写新密码</tip><i style="display: none"></i></div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'miniPage'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.verify({

            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
        form.render();

        $("#oldPassword").blur(function () {
            let oldPassword = $("#oldPassword").val();
            console.log("old====" + oldPassword);
            axios({
                url: 'admin/verifyPassword?password='+oldPassword,
                method: 'get'
            }).then(response => {
                if (response.code == 0){
                    // layer.msg("true")
                    $("#flag").val("0");
                    $("#i1 tip").text("旧密码验证通过");
                    $("#i1 i").attr("style", "display: inline");
                    $("#i1 i").removeClass("rfont");
                    $("#i1 i").addClass("layui-icon layui-icon-ok gfont");
                }else{
                    // layer.msg("false");
                    $("#flag").val("1");
                    $("#i1 tip").text("旧密码验证不通过");
                    $("#i1 i").attr("style", "display: inline");
                    $("#i1 i").removeClass("gfont");
                    $("#i1 i").addClass("layui-icon layui-icon-close rfont");
                }
            }).catch(error => {
                layer.msg(error);
            })
        });


        $("#againPassword").blur(function () {
            let newPassword = $("#newPassword").val();
            let againPassword = $("#againPassword").val();
            if (newPassword == againPassword){
                $("#i2 tip").text("两次密码一致")
                $("#i2 i").attr("style", "display: inline");
                $("#i2 i").removeClass("rfont");
                $("#i2 i").addClass("layui-icon layui-icon-ok gfont");
            }else{
                $("#i2 tip").text("两次密码不一致");
                $("#i2 i").attr("style", "display: inline");
                $("#i2 i").removeClass("gfont");
                $("#i2 i").addClass("layui-icon layui-icon-close rfont");
            }
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {

            if ($("#flag").val()==0){
                let newPassword = $("#newPassword").val();
                let againPassword = $("#againPassword").val();
                if (newPassword == againPassword){

                    //修改密码
                    axios({
                        url: "admin/updatePassword",
                        method: "post",
                        data: data.field
                    }).then(response => {
                        if (response.code == 0){
                            layer.msg(response.msg, function () {
                                miniPage.hashHome();
                            });
                        }else{
                            layer.msg(response.msg);
                        }

                    }).catch(error => {
                        layer.msg(error);
                    });
                }else{
                    layer.msg("两次密码不一致");
                }
            }else{
                layer.msg("请确保旧密码正确");
            }
            return false;
        });

    });
</script>